<template>
	<div class="home">
		<div>{{headTitle}}</div>
		<button v-on:click="changeContent()" class="btn btn-primary">click me!{{username}}</button>
		<!-- 头部  -->
		<div class="main-header">头部</div>
		<!-- 侧边栏  -->
		<div class="main-left">
			侧边栏
		</div>
		<!-- 中间主体部分  -->
		<p>
			<router-link to="/slidb">Go to Foo</router-link>
			<router-link to="/main/learn">学习模块</router-link>
		</p>
		<router-view></router-view>
		<!-- 底部  -->
		<div>底部</div>
	</div>
</template>

<script>
// 以下Main.man还必须需要，否则组件无法加载。
Main.main = function() {
	return {
		data: function() {
			return {
				headTitle: "Hello,vue router!!",
				username: store.state.username
			}
		},
		beforeRouteEnter: function(to, from, next) {
			console.log("login beforeRouteEnter.");
			var fromPath = from.path;
			if (fromPath == null || fromPath == "" || fromPath != "/login") {
				toastr.info("搞事情！");
				router.push("login");
				// 校验用户是否登录成功
				return;
			} 
			next(function(vm) {
				console.log(vm.$route);
			})
		},
		created: function() {
			console.log("login created." + this.$route.params.name);
		},
		methods: {
			changeContent: function() {
				toastr.info("hello world.");
			}
		}
	}
}
</script>

<style>
</style>
